<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择宿舍</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
   {include file="public/header"}
    <style>
        #img_area {
            position: relative;
            display: table-cell;
            width: 130px;
            height: 180px;
        }
        #img_area img{
            width: 130px;
        }
    </style>
</head>
<body>
<div class="card" id="app">
    <h2 ref="loading" class="alert alert-info text-center py-5 align-content-center" style="position: fixed;width: 100%;height: 100vh;z-index: 1000">
        加载中,请稍后
    </h2>
    <div class="card-header">
        <button class="btn btn-sm btn-info rounded-circle" onclick="history.back()">
            <span class="fa fa-arrow-left"></span>
        </button>
        <h5 class="text-center d-inline-block w-75 m-0">
            完善信息
        </h5>
    </div>
    <div class="card-body">
        <div class="card-body">
            <form action="" ref="my_form" class="form-group" onsubmit="return false" @submit="sub">
            <h6>完善信息</h6>
                <label for="image_file" id="img_area" class="border border-secondary">
                    <img :src="img_src" class="position-absolute h-100 w-100" hidden>
                    <h4 class="h4 text-center"><span class="fa fa-plus fa-2x text-black-50 m-4"></span></h4>
                    <p class="m-3 text-center h5">上传照片</p>
                    <input id="image_file" hidden type="file" name="photo" @change="showImg">
                </label>
            <label for="">姓名</label>
            <input type="text" placeholder="请填写您的姓名" class="form-control" name="name" required>
            <label for="">学院</label>
            <select name="college" class="form-control" @change="getClass">
                <option value="" >请选择学院</option>
                <option :value="item.id" v-for="item in college">{{item.name}}</option>
            </select>
            <label for="">班级</label>
                <select name="class" class="form-control">
                    <option value="">请选择班级</option>
                    <option :value="item.id" v-for="item in class_list">{{item.name}}</option>
                </select>
                <div>
                    <label>选择校区</label>
                    <select  name="" id="" v-model="xiaoqu_id" @change="sel('gongyu','xiaoqu_id')" class="form-control">
                        <option value="">选择校区</option>
                        <option :value="item.id" v-for="item in xiaoqu">{{item.name}}</option>
                    </select>
                </div>
            <label for="" class="">选择公寓</label>
            <div class="input-group">
                <select name="" v-model="gongyu_id" id="gongyu" class="form-control" @change="sel('danyuan','gongyu_id')">
                    <option :value="item.id" v-for="item in gongyu">{{item.name}}</option>
                </select>
            </div>
            <label for="" class="">选择单元</label>
            <div class="input-group">
                <select name="" id="danyuan" v-model="danyuan_id" class="form-control" @change="sel('louceng','danyuan_id')">
                    <option :value="item.id" v-for="item in danyuan">{{item.name}}</option>
                </select>
            </div>
            <label for="" class="">选择楼层</label>
            <div class="input-group">
                <select name="" id="loucheng" v-model="louceng_id" class="form-control" @change="sel('fangjian','louceng_id')">
                    <option :value="item.id" v-for="item in louceng">{{item.name}}</option>
                </select>
            </div>
            <label for="fangjian" class="">选择房间</label>
            <div class="input-group">
                <select name="room" v-model="fangjian_id" id="fangjian" class="form-control">
                    <option :value="item.id" v-for="item in fangjian">{{item.name}}</option>
                </select>
            </div>
                <button class="btn btn-outline-info m-3 mx-auto px-3">提交</button>
            </form>
        </div>
    </div>
</div>
<script>
    let app = new Vue({
            el:"#app",
            data:{
                "gongyu":[],
                "fangjian":[],
                "danyuan":[],
                "louceng":[],
                gongyu_id:"",
                danyuan_id:"",
                "louceng_id":"",
                "fangjian_id":"",
                img_src :"",
                "xiaoqu":null,
                "xiaoqu_id":undefined,
                "college" : null,
                "class_list" : null,
            },
            methods: {
                sel:function (which_sel,cur) {
                    $.getJSON("/index/getRoom&id="+this[cur],res=>this[which_sel]=res)
                },
                sub:function (event) {
                    if (!confirm("确认信息无误?")) return;
                    let post_data = new FormData(event.target)
                    $.ajax({
                        url :"chooseFormSub",
                        contentType:false,
                        processData:false,
                        method:"POST",
                        data: post_data,
                        success: function (res) {
                            if (res.code == 200){
                                alert("提交成功");
                                location.href="./"
                            }else {
                                alert("提交失败")
                            }
                        },
                        error:function (res) {
                            alert("提交失败,可能上传的图片过大")
                        }

                    })
            },
                showImg:function (event) {
                    let file = event.target.files[0]
                    $("img")[0].hidden=0
                    this.img_src = URL.createObjectURL(file)
                },
                getClass:function (event) {
                    let id = event.target.value;
                    $.getJSON("/index/getClass?id="+id,res=>this.class_list = res)
                }

            },
        created:function () {
                    $.getJSON("/index/allXiaoqu",res=>this.xiaoqu=res)
                    $.getJSON("/index/getCollege",res=>this.college=res)
        },
        mounted:function () {
            this.$refs.loading.hidden = 1;
        }
        })
</script>
</body>
</html>